<!--
 * @Author: Dorange.Wang
 * @Date: 2021-05-18 15:32:33
 * @LastEditors: your name
 * @LastEditTime: 2021-05-18 17:29:15
 * @Description: file content
-->
<template>
  <!-- <el-table
    size="small"
    :data="tableData"
    row-key="id"
    stripe
  >
    <el-table-column prop="name" label="参数名"/>
    <el-table-column prop="value" label="参数值"/>
  </el-table> -->
  <div class="table">
    <div class="row title">
      <div>参数名</div>
      <div>参数值</div>
    </div>
    <div class="row item" v-for="item in tableData" :key="item.id">
      <div>{{ item.name }}</div>
      <div>{{ item.value }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.table{
  border-left: 1px solid #EBEEF5;
  border-right: 1px solid #EBEEF5;
}

.row{
  display: flex;
  border-bottom: 1px solid #EBEEF5;

  &.title{
    color: #99a9bf;
    border-top: 1px solid #EBEEF5;
    line-height: 28px;
    font-weight: bold;
  }

  &.item:hover{
    background-color: #F5F7FA
  }

  & > div{
    line-height: 1.2;
    padding: 8px;
    box-sizing: border-box;
    word-break: break-all;
  }

  & > div:nth-child(1){
    width: 30%;
    border-right: 1px solid #EBEEF5;
  }

  & > div:nth-child(2){
    width: 70%;
  }
}
</style>
